I'm helping a student out here. They have templates that contain an article with some anchor tags. These anchor tags represent "move up, move down, and remove".
These articles will be dynamically changing location.
What I am looking for is this: When an article is first on the page, the "Move Up" anchor should be removed. If an article is in the bottom/last position, the "Move Down" anchor should be removed.
If the article is in a middle position, all anchors must be available.
I know I can apply classes to the first and last articles on the page, but how can I specifically target those articles without them being in a list.
<script type="text/template" id="message-edit-item-template">
## $(".actions").first().children().remove(".move-up")
## $(".actions").last().children().remove(".move-down");
## ^ this is just me experimenting. I added the move-up and move-down classes to the anchors below, but they can be removed if not needed
<article class="well" data-message-id="<%= data.id %>">
<div class="message">
<div class="highlight clearfix">
<div class="actions">
<i class="fa fa-close"></i> Remove
<i class="fa fa-arrow-up"></i> Move Up
<i class="fa fa-arrow-down"></i> Move Down
</div>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" name="title" value="<%= data.title %>" class="form-control"/>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" class="form-control"><%= data.message %></textarea>
</div>
</div>
</article>
</script>
You should use CSS for this.
.actions:first-child .move-up, .actions:last-child .move-down {
display: none;
}
When you append or prepend new elements, your browser will show/hide the elements automatically based on if they match the CSS selector.
See: :first-child :last-child
Slightly different for fixNavigation() could be reused later on
$(document).ready(function() {
fixNavigation();
});
function fixNavigation() {
$('a.pull-right').show();
$('.well:first a.move-up').hide();
$('.well:last a.move-down').hide();
}
What about hide/show?
If you need the buttons to apper again when the articles dynamically change their positions, then hide the buttons instead of remove - there's no reason to remove them.
your_function_to_change_dynamically_articles_positions(){
// some code...
$(".move-up, .move-down").hide();
$(".move-up:not(:first)").show();
$(".move-down:not(:last)").show();
}
[updated JSfiddle]
JSFiddle
$(".move-up").click(function(){
var $parent = $(this).closest('article');
$parent.insertBefore($parent.prev());
showHide();
});
$(".move-down").click(function(){
var $parent = $(this).closest('article');
$parent.insertAfter($parent.next());
showHide();
});
$(".remove").click(function(){
$(this).closest('article').remove();
showHide();
});
function showHide(){
$(".move-up, .move-down").show();
$(".move-up:first").hide();
$(".move-down:last").hide();
}
showHide();
Related
I am making a small web application that allows users to add sticky notes to a page by clicking the add button. The following is the html that makes up a sticky note.
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
I am just a bit unsure how to add another sticky note everytime the user clicks add. Any help would be appreciated. Thanks!
You could generate an html element by pressing a button, for example:
var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.
var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);
this code append a div into another main container. I hope that this can be help.
var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
$stickyNote = $(stickyNote);
$stickyNote.appendTo($('.sticky_notes_container'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky_notes_container">
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
</div>
<button id=addBtn>Add</button>
Assuming all this is inside a main container ,just keep that var code=<div class="sticky_note">...</div> code in a string and use
$("container").append(code);
You can easily create a new div.By using
document.createElement("div")
You can add text, classes..just look up w3school for more details..
Also i see your requirement, that clicking on button it will create a sticky note..
Element.cloneNode()
Might be helpful for you..where you make a div once with all the design and structure and use it again again..
http://www.w3schools.com/jsref/met_node_clonenode.asp
In rendering out data within HTML, which prints out a div down the page, for every row found in the database, I'm trying to find a way to allow each button that sits in each div to toggle the individual example when clicked (with a default of display:none upon loading the page) - something such as:
function toggle_div(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
An example of the final markup :
<div>
<div class="wordtitle">Word</div>
<div class="numbers">1</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 1</div>
</div>
<div>
<div class="wordtitle">Word</div>
<div class="numbers">2</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 2</div>
</div>
getElementById() only toggles the first div's example, and getElementsByClass() hasn't seemed to work so far - not too sure how to do this - any ideas much appreciated!
First rule, do not insert multiple elements with the same ID. IDs are meant to be unique.
What you need is to toggle the example near the button you clicked, and not any (or all) .example to be showed / hidden. To achieve this, considering you used the [jquery] tag in your question, you can either use a selector to get the nearest .example of your button, or use jQuery's built-in functions to get it (.siblings()).
I would personally put the onclick out of your markup, and bind this custom function in your javascript.
Another important thing : if javascript is disabled client-side, the user won't ever see your example, as they are hidden by default in CSS. One fix would be to hide it initially with JS (see the snippet for this).
Here's a demonstration of what I mean :
$('.example-trigger').click(function() {
//Use the current button which triggered the event
$(this)
//Find the sibling you want to toggle, of a specified class
.siblings('.example-label')
//Toggle (hide or show) accordingly to the previous display status of the element
.toggle();
});
//Encouraged : hide examples only if Javascript is enabled
//$('.example-label').hide();
.example-label {
display: none;
/* Discouraged : if javascript is disabled, user won't see a thing */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<button class="example-trigger">Toggle example 1</button>
<span class="example-label">Example 1</span>
</div>
<div>
<button class="example-trigger">Toggle example 2</button>
<span class="example-label">Example 2</span>
</div>
<div>
<button class="example-trigger">Toggle example 3</button>
<span class="example-label">Example 3</span>
</div>
As #Sean stated, you need the ID to be unique since that's the way you are getting your elements.
$words .= '<div class="wordtitle">' . $word .'</div>
<div class="numbers">' . $i . '</div>
<div class="definition">' . $definition . '</div>
<button class="button" id="show_example" onClick="toggle_div(\'example\''.$i.')">
show example</button>
<div class="example" id="example'.$i.'">' . $example . '</div>
<br/><br/>';
$i++;
#show_example will also be repeating so you will probably want to change that to a class.
Another answer, only because I had the answer ready and was called away before I could post it. So here it is.
Notice that for repeating elements, classes are used instead of IDs. They work just as well, and (as everyone else has already said), IDs must be unique.
jsFiddle demo
HTML:
<div class="def">
<div class="wordtitle">Aardvark</div>
<div class="numbers">1</div>
<div class="definition">Anteater</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The aardvark pushed its lenghty snout into the anthill and used its long, sticky tongue to extract a few ants.</div>
</div>
<div class="def">
<div class="wordtitle">Anecdote</div>
<div class="numbers">2</div>
<div class="definition">Amusing Story</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The man told an anecdote that left everyone laughing.</div>
</div>
jQuery:
var $this;
$('.show_example').click(function() {
$this = $(this);
if ( $this.hasClass('revealed') ){
$('.example').slideUp();
$('.show_example').removeClass('revealed');
}else{
$('.example').slideUp();
$('.show_example').removeClass('revealed');
$this.parent().find('.example').slideDown();
$this.addClass('revealed');
}
});
how to hide div on object of div click
I am adding jquery path than my html code is here as it is and than after I am apply script to delete label class="main" with span and div class close1
but it's not perform
<label class="main ">
<span class="tag-value">mysql </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">codeigniter </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">ajax </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">jquery </span>
<div class="close1">X</div>
</label>
<script>
$(function(){
$(".close1").click(function(){
$(this).parent(".main").hide();
});
});
</script>
Check that JQ lib. is in the head of you r document, also, you can probably just use .parent()
http://jsfiddle.net/Yx4EU/
<script>
$(function(){
$(".close1").click(function(){
$(this).parent().hide();
});
});
</script>
If this does not work, I suggest adding a fiddle for someone to look at.
Check this out: http://jsfiddle.net/8436y/1/
In this fiddle you will notice I haven't defined the parent, since it is not necessary (in this case).
http://jsfiddle.net/8436y/5/
here I have used the .closest() to define the closest class="main" , which also works ;)
Ok, this sounds easy, but I'm having problems trying to identify the anchor tag. The HTML block repeats itself.
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#q1">
Question 1
</a>
</h4>
</div>
<div id="q1" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label for="inputQ1" class="col-sm-2 control-label">Question</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="inputQ1" placeholder="e.g How was our service?">
</div>
</div>
</div>
</div>
I got the answer I need over here
how to show text while typing in textarea in jquery
What I need to know is, how do I make it so that the text in the anchor tag changes? I don't want to put in an ID for all of them. I should be using parent() and siblings(), right?
Try
jQuery(function ($) {
$('.panel-body input').keyup(function(){
$(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value)
})
});
Demo: Fiddle
Note: To be more specific I might add an additional class as shown in this fiddle
You can do this with keyup and html:
$(document).ready(function(){
$("#text").keyup(function(){
$("#q1").html($(this).val());
});
});
Where #text is the textarea and #q1 is the anchor:
JSFiddle
You can use:
$('#inputQ1').keyup(function(){
var $this = $(this);
$this.closest('#q1').prev().find('a').html($this.val());
});
Fiddle Demo
I think the best (because the logic) if you could create a parent around this code (if you can)
<div class="parent">
<h4>
<a>...</a>
</h4>
<div>
<input>
</div>
</div>
in the event $(this) is your input
you can use $(this).closest('parent').find('a') to find the for the
Try using anchor parent:
$('.panel-title a').text( /* textarea text */ );
try this
$('.panel-title a').text( 'new text' );
Just a quick one, hopefully. I've coded up this:
<script>
$("div.design-project").css('display', 'none');
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "block";
}
else {
document.getElementById(tid).style.display = "none";
}
}
</script>
Which, if a link has the href:
href="javascript:InsertContent('design-project-1');"
it displays that div below. And if you click it again it disappears. Then if you click another link that say has the href:
href="javascript:InsertContent('design-project-2');"
it'll display that div and so forth.
However, if you have one div open, and click on another anchor link to open another div, it doesn't close the one already open.
Any ideas? Also, if there's a better way to do this then please let me know.
Thanks,
R
Here is the HTML as requested:
<a class="design-projects-slides-title" href="javascript:insertDesignProjectContent('design-project-1');">Title of project</a>
<!-- start of .design-project --><div class="design-project" id="design-project-1">
<div class="grid_6"><div class="project-info-area">
<h2>Title of project</h2>
<p>A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.<p>
<p>By coincidence a former chapel partition was found that matched the dimensions required. Used in their original painted condition, these doors became the front elevation and concertina open to one side - perfect for warm summer days. Further reclaimed elements include a bespoke curtain made from found patchwork, Victorian conservatory grills fitted over modern french heaters and industrial lights, taps, wash basin and an exposed shower fitting. Salvaged hardwood strip flooring and our Heathrow Terminal 2 stone fold from the floor to the walls. A thorough use of salvage all round!</p>
</div></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_12 project-info-images"><img src="http://placehold.it/940x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
<div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
</div><!-- end of .design-project -->
UPDATE
In the end, I used a combination of your answers - thanks!
<!-- Reveal/hide sections on design projects/joinery -->
<script>
/* This is for the 'choose a project' reveal/hide */
$("div.slider-content").css('display', 'block');
$(".design-projects-slides-title").click(function() {
$(".slider-content").hide();
});
/* This is for reveal/hide on the product content */
$(".design-project").hide()
$('.design-projects-slides-title').click(function(){
var id = $(this).attr('id')
var content_id = id+"-content"
$('#'+content_id).slideDown('slow')
});
$(".slider-trigger").click(function() {
$(".design-project").hide();
});
</script>
First of all i see that you use jQuery so why not use it to achieve the entire flow?
You could do something like:
$(".mydivclass").click(function(){
$(".mydivclass").hide();
$(this).show();
})
Use jQuery toggle to achieve what you are trying to do. e.g.
function InsertContent(tid) {
$('#'+tid).toggle()
}
Another improvement you should do is that instead of hardcoding the id in each href, just add a class to element, override onclick of element and toggle related content. To get related content you can use a nomenclature e.g. if you use id='myid' for anchor, use id="myid_content" for content, so in click function you can toggle content e.g.
HTML:
<a class="content-link" id="myid">click me</a>
<div id="myid_content">
Here is the content
</div>
JavaScript:
$('.content-link').click(function(){
var id = $(this).attr('id')
var content_id = id+"_content"
$('#'+content_id).toggle()
}
Here is a working sample on jsFiddle
Better still is to keep clickable link and content inside a div, so that you don't need to set id, just set some classes and with parent and child relations you can get what is content e.g.
HTML
<div class="content-wrap">
<a class="content-link" >Click Me</a><br/>
<div class="content">
Here is the content for click me
</div>
</div>
JavaScript:
$('.content-link').click(function(){
var id = $(this).parent().find(".content).toggle()
})
See it in action here
HTML
<a id="id1" href="#" rel="divContent1" >First</a><br/>
<a id="id2" href="#" rel="divContent2">Second</a><br/>
<div id="divContent1" class="content">
Content of Div 1
</div>
<div id="divContent2" class="content">
Content of Div2
</div>
Javascript
$(function(){
$(".content").hide();
$("a").click(function(e){
e.preventDefault()
var divToShowId=$(this).attr("rel");
$(".content").hide();
$("#"+divToShowId).show();
});
})
I used the id of Content divs as the rel attribute value of links as we need some way to connect a link with its content.
Here is the working demo : http://jsfiddle.net/Kx9Ma/5/