Ok so i have dragged div with same id multiple time in other div, now i want to move this up and down onclick.
Is there any way to accomplish this using javascript.
never assign same id to different elements. it is not valid, id has to be unique.
if you must have all of them id-ed by '1' then rather assign all of them a class named '1' like this:
<div class="upDownDiv" id="stage" ondrop="drop(event)" ondragover="allowDrop(event)" style="text-align: center;display: table-cell;vertical-align:middle;">
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
</div>
to access all of the divs with class '1' later simply do a
var myDivs = document.getElementsByClassName('1');
and then iterate through them one by one and do your bidding.
or use jQuery and handle all of them same time.
Related
I have multiple div which has the same class and I want to display only one div per click which belongs to the parent div. I want to hide and show div "post-reply-box".
HTML
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i></a>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p> </div>
<div class="comnt comnt-reply">
<div class="post-reply-box" style="padding:10px; display: none;">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton">cancel</button>
</form>
</div>
</div>
jQuery
$(document).ready(function(){
$(".fa-reply").on("click",function(){
$(".post-reply-box").css("display","block");
});
});
$(document).ready(function(){
$(".cancelButton").on("click",function(){
$(".post-reply-box").css("display","none");
});
});
The issue in your code is because you're using a class selector which retrieves all the .post-reply-box elements in the DOM, not just the one relevant to the button which was clicked.
To fix this use DOM traversal to relate the elements to each other. In this specific example use closest() to get the .we-comment related to the button, then next() to get the .comnt-reply container, then find().
In addition there some other issues which need to be addressed:
There's no need to duplicate document.ready handlers. Put all the logic in a single one.
Use show() and hide() instead of css() to set the display state of the element.
Use a CSS file instead of inline style elements to set style rules.
Attach the event handler to the a element, not the child i, and call preventDefault() on the event that's raised.
Add the type="button" attribute to the Cancel button so that clicking it does not submit the form.
With all that said, try this:
jQuery($ => { // updated document.ready handler
$(".we-reply").on("click", e => {
e.preventDefault()
$('.post-reply-box').hide(); // hide all
$(e.target).closest('.we-comment').next('.comnt-reply').find(".post-reply-box").show(); // show relevant
});
$(".cancelButton").on("click", function() {
$(".post-reply-box").hide();
});
});
.post-reply-box {
padding: 10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
I have a <div> which contains a <button>. When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div>. Also, the new <div> contains a <button>, which when clicked opens the old <div>. This will enable me to open one <div> at a time on click of the <button> present in those <div>. Can anyone tell me how to do this in AngularJS?
This picture shows my requirement
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
CodePen: https://codepen.io/RaymondAtivie/pen/OXYRyE
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
Using ngShow:
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>
http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')
Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")
Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();
I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.