EDITED
To make it more specific.
This is my code.
<div class="ccms_form_element cfdiv_file" id="attachment_1_container_div" style="margin: 0; padding: 0;">
<label for="attachment_1">Συννημένα:</label>
<input id="attachment_1" class="" title="" type="file" name="attachment_1">
<img src="http://www.saveursdebacchus.com/medias/images/plus-sign.png" id="plus" onclick="addfield()" style="width: 35px; position: relative; top: 4em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" style="display: none; position: relative; left: 11.5em; margin: 0px; padding: 0px;height: 38px;" id="attachment_2_container_div">
<input id="attachment_2" class="" title="" type="file" name="attachment_2" style="position: relative; top: -1em;">
<img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/3d-glossy-orange-orbs-icons-alphanumeric/104914-3d-glossy-orange-orb-icon-alphanumeric-minus-sign-simple.png" id="minus" onclick="removefield()" style="width: 35px;position: relative;left: 3em;top: 0.095em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" id="attachment_3_container_div" style="position: relative; left: 11.5em; margin: 0; padding: 0; display: none;">
<input type="hidden" name="attachment_3" value="" alt="ghost">
<input id="attachment_3" class="" title="" type="file" name="attachment_3">
</div>
What I want is, the img#plus when is clicked to display the next field (e.g div#attachment_2_container_div) and the image to go down closed to new displayed field.
This for 2 times (first for div#attachment_2_container_div and second for div#attachment_3_container_div). And also the inverse method with img#minus.
I think it needs more code than 5-10 lines.. Thats why I asked little by little.
I'll follow a more simply way (I will give images in every row and on display of a div I'll take the result I want). Sorry for any trouble.
Moves the button down incrementally on the number of clicks the button recieves, so the 'jumps' get 1em larger each time, you can adjust the way the 'counter' variable increments in addfile to change the 'jumps'
Not sure if this is what you're looking for, relatively unclear question
[revision to include 1,3,5em jumps]
var imgObj = null;
var counter = 0;
function init(){
imgObj = document.getElementById('plus');
imgObj.style.position= 'relative';
imgObj.style.top = '1em';
}
function addfile(){
counter++;
if(counter==1){
imgObj.style.top = parseInt(imgObj.style.top) + 1 + 'em';
}
else if(counter==2){
imgObj.style.top = parseInt(imgObj.style.top) + 3 + 'em';
}
else if(counter==3){
imgObj.style.top = parseInt(imgObj.style.top) + 5 + 'em';
}
else
imgObj.style.top = parseInt(imgObj.style.top) + 0 + 'em';
}
window.onload =init;
I m not sure what u want , but according to what i understood by ur question i have done a fiddle, here is the link, hope its what u needed :) fiddle click here
var my=null; //dont consider this line, m new here, pls ignore
I have done modification in your HTML, and functions are a mixture of both javascript and jquery.
Related
I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:
As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */
I have a DOM like this, when i fill the input field and click the button i need to create a textarea element and and stored the input value there.
if i click multiple times create multiple textarea and multiple ID's, How can i do this please check my code, Best answers must be appreciated
$('#note').on('click', function(){
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
});
.full-width.note_cover {
float: left;
margin-bottom:15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div><!-- #content_bag -->
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>
Your code is working fine, just put storedNoteVal in text-area, and input won't generate any text-area if its blank.
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
if(storedNoteVal){
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>');
//$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
}
});
.full-width.note_cover {
float: left;
margin-bottom: 15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div>
<!-- #content_bag -->
<div>
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>
</div>
Building on Abhinshek answer -
Your code actually reassign id's to the textareas, since you loop through all the elements after prepending them.
You could define count_id as a window variable (outside the click function) and then just use it.
Also, you don't need to wrap noteCov with $() since $('.note_cover') returns a jQuery objects array
var count_id = 1;
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId_'+count_id+'"><textarea>' + storedNoteVal + '</textarea></div>');
count_id++;
});
This way each textarea gets it's own unique id that doesn't change
I have seen many similar problems but when I try them they end up failing. It has gotten to the point where my code is totally messed up and I need some help both cleaning it up and fixing my issue. (using chrome)
So far I have tried selecting the value of the form and putting that into a div,
I have tried to use the button as just a link to start the script so that the page doesn't reset and also many other answers found on-line, none of them are helping so I am asking for a personalised help.
function on_comment_add() {
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
<!-- var node = document.createTextNode("This is new."); -->
var node_1 = document.getElementById("user_name").value;
var node_2 = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
main.innerHTML = element;
return false;
}
body {
background-color: lightGreen;
}
div.middle {
width: 80%;
margin-left: 10%;
background-color: #47e077;
height: 940px;
font-size: 10pt;
font-family: aubrey;
border: 3px solid gold;
}
.comments-form {
text-align: center;
}
#display_comment_div {
background: rgba(200, 54, 54, 0.1);
width: 80%;
margin-left: 9%;
border: 0.1px solid lightGreen;
border-radius: 25px;
}
#add_user_name {
width: 45%;
float: left;
}
#add_user_comment {
width: 45%;
display: inline-block;
float: right;
}
<div class="middle">
<div class="comments-form">
<form>
<label for="name" style="width:100px; display:inline-block;">Name</label>
<input id="user_name" type="text" placeholder="name goes here" style="width:300px; margin-left:5px;" />
<br><br>
<label for="comment" style="width:100px; display:inline-block;">Comment</label>
<textarea id="user_comment" placeholder="comment goes here" maxlength="150" style="width:300px;max-width:300px;"></textarea><br>
<button style="margin-left:310px;" onmousedown="return on_comment_add">Submit</button>
</form>
<div id="div1">
</div>
</div>
</div>
I guess what I am asking is if anyone can help me display the username and comment below the form but it seems tricky for me because I have gone through so many answers that don't work for me that I cannot think of any other ways to do it.
For clarification this code is not meant to keep the comments from the form nor is it meant to be a fully functioning site. I am just making slight modifications to some code so that I can hand it in as a college assignment.
Using onclick and pass the event inside:
<button style="margin-left:310px;" onclick="on_comment_add(event)">Submit</button>
And disable the default form submit action:
function on_comment_add(e) {
e.preventDefault()
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
var node_1 = document.createElement("div");
node_1.innerHTML= document.getElementById("user_name").value;
var node_2 = document.createElement("div");
node_2.innerHTML = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
return false;
}
Workable example: https://jsfiddle.net/kingychiu/z6gnqswn/
Change type to "button" to prevent automatical form sending and add parentheses to onmousedown expression:
<button type="button" style="margin-left:310px;" onmousedown="return on_comment_add()">Submit</button>
Then change this
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
to this (since node_1, node_2 are values, not elements):
add_user_name.innerHTML = node_1;
add_user_comment.innerHTML = node_2;
And remove that line
main.innerHTML = element;
above
return false;
That should work.
I am just trying to cycle through all my images and then do nothing at the end via an onclick function. However I am having trouble. Any suggestions would be great.
<SCRIPT>
var quizImagesB = new Array();
quizImagesB[0]="images/dratiniB.png"
quizImagesB[1]="images/parasB.png"
quizImagesB[2]="images/mewB.png"
quizImagesB[3]="images/doduoB.png"
quizImagesB[4]="images/meowthB.png"
quizImagesB[5]="images/cloysterB.png"
quizImagesB[6]="images/ponytaB.png"
quizImagesB[7]="images/articunoB.png"
quizImagesB[8]="images/flareonB.png"
function updateImgB(){
for(var i=0; quizImagesB<.length; i++){
var url = 'url(' + quizImagesB[i] + ')'; //alters css
document.getElementById('pkmnImg').style.backgroundImage=url;
}
}
</SCRIPT>
<style type="text/css">
#pkmnImg
{
background-image: url(images/charmanderB.png);
background-repeat: no-repeat;
text-align: center;
width: 400px;
height: 450px;
margin-top: 10px;
margin-left: 15px;
}</style>
<FORM>
<INPUT TYPE="Button" VALUE="Change the image source" onClick="updateImgB();">
</FORM>
<div id ="pkmnImg"></div>
Ok this should work. Instead of looping through the array you want to increase the value of i by 1 on each click, allowing you to cycle through the array this way - see jsfiddle - https://jsfiddle.net/ffd7tmwy/1/
Javascript:
var quizImagesB = new Array();
quizImagesB[0]="images/dratiniB.png"
quizImagesB[1]="images/parasB.png"
quizImagesB[2]="images/mewB.png"
quizImagesB[3]="images/doduoB.png"
quizImagesB[4]="images/meowthB.png"
quizImagesB[5]="images/cloysterB.png"
quizImagesB[6]="images/ponytaB.png"
quizImagesB[7]="images/articunoB.png"
quizImagesB[8]="images/flareonB.png"
var i = 0
function updateImgB(){
var i = i + 1;
var url = 'url(' + quizImagesB[i] + ')';
document.getElementById('pkmnImg').style.backgroundImage=url;
}
HTML
<div id='pkmnImg'></div>
<form>
<input type="button" value="Change the image source" onClick="updateImgB()">
</form>
Trying to figure out how to switch from one to two images then back to one with an onlick.
So far I have below which works no problem for switching to one image and back to original image. Ultimately I'm trying to get the first onclick event to be two images vertically and then click again back to the first single image.
var play = false;
function toggle() {
var image = document.getElementById('image')
var scan = document.getElementById('scan');
play = !play;
if (play) {
image.src = "pause.png";image.width="182";image.height="182";image.border="0";
scan.play();
}
else {
image.src = "play.png";image.width="182";image.height="182";image.border="0";
scan.pause();
}
}
and in body:
<img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;">
This should work fine except, take out the width, height and border from the javascript, they're not changing so why have it there and risk some browsers freaking out on them?
I just put this together real quick to test and it works a treat.. I've commented out scan.play and pause of course but I'm assuming you've checked the console in your browser to see if those are throwing any errors?
I took the <a> out and used style cursor=pointer instead for the click-able element as well.. either way works but this is neater and works from ie6 I think, ie7+ definately.
edit: removed source block didn't achieve goal of question
After discussion in comment there's heaps of ways to do it, and I'd probably use jQuery but since you're not here's one not
<!doctype html>
<html>
<head>
<script type="text/javascript">
var play = true;
function toggle() {
//var scan = document.getElementById('scan');
var playpause = document.getElementById('playpause');
var btnplay = playpause.getElementsByClassName('play');
var btnpause = playpause.getElementsByClassName('pause');
play = !play;
if (play) {
btnplay[0].className = 'btn play active';
btnpause[0].className = 'btn pause';
//scan.play();
}
else {
btnplay[0].className = 'btn play';
btnpause[0].className = 'btn pause active';
//scan.pause();
}
}
</script>
<style>
.btn {
width: 182px;
height: 182px;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.btn.active { visibility: visible; }
.btn.play { background: url('play.png') no-repeat 0 0; }
.btn.pause {
background: url('pause.png') no-repeat 0 0;
padding: 182px 0 0 0;
}
</style>
</head>
<body>
<div id="playpause">
<div class="btn play active" onclick="toggle()">
</div>
<div class="btn pause" onclick="toggle()">
<img src="other.png" alt="other" />
</div>
</body>
</html>