I want to create a functionality where when I click the data in Textbox1 (the data is basically a button with "tick" as shown in the image link below), then the data should be transferred to TextBox2 and should no longer appear in TextBox1.
Also from Textbox2 if I click the data (button with "X" image), then again the data should be transferred from TextBox2 to Textbox1 and Textbox2 should no longer contain the data.
I am working on dojo. But it would be fine if the answers are not related to dojo.
I wanted to know if there are any features available in dojo for this.
A javascript hint would also be helpful :)
$(document).ready(function() {
$("body").on("mouseover", ".opt", function(e) {
$(this).attr({color: "#0000ff"});
});
$("body").on("click", ".opt", function(e) {
var _divOpt;
var _parent = $(this).parent().attr("class");
var _index = $(this).index();
var _html = $('<a/>')
.attr({
"class": "opt",
"href": "javascript:void(0)"
})
.append($(this).clone())
.html();
if ("div1" === _parent) {
$(".div2").append(_html);
} else {
$(".div1").append(_html);
}
$(this).remove();
});
})
* {
font-family: "arial";
font-size: 12px;
color: #FF0000;
}
.wrapper {
float: left;
width: 100%;
}
.option-close{
margin-left:50px;
}
.div1,
.div2 {
float: left;
width: 30%;
height: 70%;
padding: 5px;
margin: 5px;
}
a div{
float:left;
width:100%;
text-align:center;
}
a {
padding: 5px;
margin: 5px;
border: 1px solid #cccccc;
float: left;
width:70%;
}
a:hover, div:hover, div:hover{
color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="div1">
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 1</div>
</a>
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 2</div>
</a>
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 3</div>
</a>
</div>
<div class="div2">
</div>
</div>
Related
I'm fairly new to Javascript, and i've reached an issue I can't figure out yet, so I'll explain it as best as I can.
I've got 2 divs containing a reply link with the same ID, OnClick. Only difference is the data-attribute which I thought could be used to differentiate the two. There are 2 reply divs that are styled to be hidden. The aim is once the reply link is clicked, the correct div will display below it.
The issue is, when you click any of the two Reply links, it only opens the first reply div below the first parent div. I'll created a little example to give a better understanding:
// Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database
function replyLink(element) {
document.getElementById('reply').style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink() {
document.getElementById('reply').style.display = "none";
}
#comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
#comment #content{
border: none;
padding: 15px;
font-size: 12px;
}
#comment #link{
border: none;
padding: 5px;
margin-top: 5px;
}
#comment #link a{
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
#comment #link a:hover{
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
#reply{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div id="comment">
<div id="content">
Content #1
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<div id="comment">
<div id="content">
Content #2
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
Would a java genius be able to help me out.
You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example
function replyLink(index) {
document.getElementById('reply_' + index).style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink(index) {
document.getElementById('reply_' + index).style.display = "none";
}
.comment {
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .content {
border: none;
padding: 15px;
font-size: 12px;
}
.comment .link {
border: none;
padding: 5px;
margin-top: 5px;
}
.comment .link a {
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
.comment .link a:hover {
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
.reply {
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">
Content #1
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
</div>
</div>
<div class="reply" id="reply_0" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
</div>
<div class="comment">
<div class="content">
Content #2
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
</div>
</div>
<div class="reply" id="reply_1" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
</div>
While the use of an id is straightforward when first working with JavaScript and HTML, it's use is discouraged as an anti-pattern. IDs make for brittle code (as you are seeing here) and don't scale well. Instead, don't use ids at all and instead use classes or a relative reference to the elements, such as this, .closest(), nextElementSibling, parentNode, etc.
Also, using hyperlinks as a "hook" to initiate some code upon a click event is semantically incorrect. Hyperlinks are for navigation and people who use screen readers will have difficulty navigating your page. Just about every visible HTML element supports a click event, so just attach a click handler directly to the element instead of wrapping the element with a hyperlink.
Lastly, there is no need for separate show and hide functions. Just add or remove a "hidden" class based on what was clicked.
You can see in my answer how much cleaner the HTML and JavaScript are without ids.
See comments inline below.
// Set up a single event handler for any clicks to any reply or Close
document.addEventListener("click", function(event){
// Check to see if the click originated at a Reply element
if(event.target.classList.contains("reply")){
// Find the closest ".comment" ancestor of the clicked reply
// element and then get the next element sibling to that and
// unhide it.
event.target.closest(".comment")
.nextElementSibling.classList.remove("hidden");
} else if(event.target.classList.contains("replyContainer")){
event.target.classList.add("hidden");
}
});
.hidden { display:none; }
.comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .reply{
padding: 5px;
margin-top: 5px;
}
.replyContainer{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">Content #1</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 1[Close]</div>
<div class="comment">
<div class="content">Content #2</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 2[Close]</div>
<div class="comment">
<div class="content">Content #3</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 3[Close]</div>
I would like to make a sidebar menu like mcmaster.com website. It allows you to dynamically narrow down the products and toggle through options. As you can see in the images, when "metric" option is selected all the page is changed based on metric based products, the sidebar and also the whole page. It is interesting that the URL has not been changed much. I mean the page is not being reloaded by clicking the "metric" option.
before clicking the "metric" option
after clicking the "metric" option
So, can I have somthing like this just with html, css and Javascript?
The question is too broad. You would actually need to come up with the code and then post it in here in order to be helped by the community.
From what I see they use Ajax in order to update the page content based on the filter options.
A simples form of filtering would be if you have some items in the page already displaying and then, based on the filter, some would be shown and other would be hidden.
Below is a simple example. Blue is metric, green is inch. Also, if you click on clear you will clear the filtering. This is the most simple filter you can create.
$(".filter span").click(function(){
$(".filter span").removeClass("selected");
$(this).toggleClass("selected");
var theClass = $(this).attr("class");
theClass = theClass.replace(" selected","");
if ( theClass === "metric" ) {
$(".items .inch").hide();
$(".items .metric").show();
} else if ( theClass === "inch" ){
$(".items .inch").show();
$(".items .metric").hide();
} else {
$(".item").show();
$(".filter span").removeClass("selected");
}
});
.filter {
width: 100%;
display: block;
float: left:
}
.items {
width: 100%;
display: block;
float: left;
}
.item {
display: block;
float: left;
width: 10%;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #ccc;
padding: 10px;
text-align: center;
}
.items .inch {
background: #0f0;
}
.items .metric {
background: #00f;
}
.filter span:hover {
cursor: pointer;
font-weight: 900;
padding: 2px;
border: solid 1px #000;
}
.selected {
font-weight: 900;
padding: 2px;
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
Choose: <span class="metric">metric</span> <span class="inch">inch</span><span class="clear"> clear</span>
</div>
<ul class="items">
<div class="item metric">1. metric</div>
<div class="item inch">2. inch</div>
<div class="item metric">3. metric</div>
<div class="item metric">4. metric</div>
<div class="item inch">5. inch</div>
<div class="item metric">6. metric</div>
<div class="item metric">7. metric</div>
<div class="item inch">8. inch</div>
<div class="item metric">9. metric</div>
</ul>
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
Hi I am repeating div using foreach in my application. Because of this I am facing problem on current element click function. When ever I am clicking on current div, I need to highlight one more div which is placed down side of target div(this not children div). So, problem is the same div highlighting in another div also which is repeating using foreach.
Please have a look and kindly help me.
Here is the sample linkFiddle
click on "click 1" div , then you will get what is problem.`
$(".prev").click(function(){
$( ".prev ~ div" ).css( "border", "3px groove blue" );
});
div, span {
display: block;
width: 80px;
height: 80px;
margin: 5px;
background: #bfa;
float: left;
font-size: 14px;
}
div#small {
width: 60px;
height: 25px;
font-size: 12px;
background: #fab;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>
</div>
<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>
</div>
`
Ids must be unique in HTML. So use a class instead:
<div>
<span class="prev">span#prev</span>
<div>div sibling</div>
</div>
<div>
<span class="prev">span#prev</span>
<div>div sibling</div>
</div>
jquery
$(".prev").click(function(){
$(".prev").next().css("border", 'none');
$( this).next().css( "border", "3px groove blue" );
});
Fiddle
You can set the styles in CSS and add a class and target the sibling using +
$(document).ready(function() {
$("span").click(function() {
$("span").removeClass('clicked');
$(this).addClass('clicked')
});
});
div,
span {
display: block;
width: 80px;
height: 80px;
margin: 5px;
background: #bfa;
float: left;
font-size: 14px;
}
div#small {
width: 60px;
height: 25px;
font-size: 12px;
background: #fab;
}
.clicked + div {
border: 3px groove blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="prev">span#prev</span>
<div>div sibling</div>
</div>
<div>
<span id="prev">span#prev</span>
<div>div sibling</div>
</div>
I would like to create links to content that is hidden by a show/hide java script. There are three divs within each hidden content with videos and text to which I would like create links; e.g., create a link to the "example" div shown in the code below. It doesn't have to be linked directly to each div. Creating a link destination above the div would be even better. I hope my question makes sense.
The code I am using for the show/hide works perfectly. This is a generic version of that code:
HTML
<p>***Visible content***
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>***Hidden content***</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
CSS
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
JavaScript
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
Hoping that I understand your question. Study the example below
HTML
$(document).ready(function() {
$('li').click(function () {
$('.content:visible').hide(); // hides the visible content before
$('.content').eq($(this).index()).show(); // shows the corresponding content
});
});
li {
display: inline;
text-transform: uppercase;
font-family: calibri;
height: 24px;
}
.content {
font-size: 60px;
color: red;
}
.content:not(:first-of-type) {
display: none; /* Hides all but the first .content div */
}
li a {
padding: 0 15px 0 15px;
text-decoration: none;
line-height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="content"> Content One</div>
<div class="content"> Content Two</div>
<div class="content"> Content Three</div>
<div class="content"> Content Four</div>
Note: Had to put this together to help you understand how you can achieve what you want, so you have to make necessary changes to get it to work for you.